<template>
  <div class="goodlist-wrap">
    <Search ref="Search"></Search>
    <div class="container w">
      <div class="bread-crumb">
        <!-- <Breadcrumb>
          <BreadcrumbItem to="/"> 首页 </BreadcrumbItem>
          <BreadcrumbItem to="/goodsList?sreachData=">
            <Icon type="bag"></Icon> {{ searchItem }}
          </BreadcrumbItem>
        </Breadcrumb> -->
      </div>
      <!-- 商品标签导航 -->
      <GoodsClassNav :brandList="brandList"></GoodsClassNav>
      <!-- 商品展示容器 -->
      <div class="goods-wrap">
        <ul class="goods-box" v-if="goodsList.length">
          <li
            v-for="(item, index) in goodsList"
            :key="index"
            class="goods-box-item"
            @click="goDetail(item)"
          >
            <div class="goods-show-img">
              <img :src="item.thumb_url" />
            </div>
            <div class="goods-show-price">
              <span>
                <Icon type="social-yen text-danger"></Icon>
                <span class="seckill-price text-danger">
                  {{ item.currency_symbol }}{{ item.zs_price }}</span>
              </span>
            </div>
            <div class="goods-show-detail">
              <span>{{ item.goods_name }}</span>
            </div>
            <div class="goods-show-num">
              <span>{{ `${item.leixing}人付款` }}</span>
              <!-- <span>{{}}</span> -->
            </div>
          </li>
        </ul>
        <Empty v-else />
        <div class="goods-page" v-if="goodsList.length">
          <Page :total="goodsList.length" show-sizer></Page>
        </div>
      </div>
    </div>
    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>
</template>

<script>
import Search from "@/components/Search";
import {Empty} from "@/components";
import GoodsListNav from "@/components/nav/GoodsListNav";
import GoodsClassNav from "@/components/nav/GoodsClassNav";
import store from "@/vuex/store";
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
import { goGoodsDeatil } from "@/common/utils";

export default {
  name: "GoodsList",
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data() {
    return {
      searchItem: "",
      isAction: [true, false, false],
      icon: ["arrow-up-a", "arrow-down-a", "arrow-down-a"],
      goodsTool: [
        { title: "综合", en: "sale" },
        { title: "评论数", en: "remarks" },
        { title: "价格", en: "price" },
      ],
      brandList:[],
      goodsList:[],
      key:''
    };
  },
  created() {
     this.loadGoodsList();
     const {key,cate_id} = this.$route.query || {}
     this.key = key
     console.log({key});
     key && this.searchGoods()
     if(cate_id){
      this.cate_id = cate_id
      this.getCategoryGoodsList()
     }
  },
  mounted(){
    // console.log('searchRef',this.$refs.Search);
    // this.$refs.Search.searchData = searchData
  },
  watch:{
    searchKey(newV,oldV){
      if(oldV!==newV){
        console.log({oldV,newV})
        this.key = newV
        this.searchGoods()
      }
    }
  },
  computed: {
    ...mapState(["asItems", "isLoading","searchKey"]),
    ...mapGetters(["orderGoodsList"]),
  },
  methods: {
    ...mapActions(["loadGoodsList"]),
    ...mapMutations(["SET_GOODS_ORDER_BY"]),
    orderBy(data, index) {
      console.log(data);
      this.icon = ["arrow-down-a", "arrow-down-a", "arrow-down-a"];
      this.isAction = [false, false, false];
      this.isAction[index] = true;
      this.icon[index] = "arrow-up-a";
      this.SET_GOODS_ORDER_BY(data);
    },
    goDetail(item){
      const {id}= item
      goGoodsDeatil.bind(this)(id)
    },
    getCategoryGoodsList(){
      const {cate_id,page='1',sort,brand_id} =this
      this.$http.getCategoryGoodsList({
        cate_id,
        page,
        sort,
        brand_id
      }).then(res=>{
        this.setData(res)
      })
    },
    searchGoods(){
      const {key,page='1',sort,brand_id} =this
      this.$http.getsearchgoods({
        keyword_name:key,
        page,
        sort,
        brand_id
      }).then(res=>{
        this.setData(res)
    })
  },

    setData(res){
      const {status,mess,data:{goodres,brandres}={}} = res
        if(status===200){
          brandres.length && this.$set(this,'brandList',brandres)
          this.$set(this,'goodsList',goodres)
          if(!goodres.length){
            this.$Message.error(this.$t('暂无商品'));
          }
        }else{
          this.$Message.error(mess);
        }
      }
  },
  components: {
    Search,
    GoodsListNav,
    GoodsClassNav,
    Empty
  },
  store,
};
</script>

<style lang="scss" scoped>
@import "@/common/style/common.scss";

.goodlist-wrap {
}
.container {
  min-width: 1000px;
}
.text-danger {
  color: #e2231a;
}
.seckill-price {
  margin-right: 5px;
  font-size: 20px;
  font-weight: bold;
}
.goods-box {
  display: flex;
  flex-wrap: wrap;
  &-item {
    width: 19%;
    background-color: #fff;
    margin-bottom: 18px;
    padding: 15px;
    transition: all 0.5s;
    &:hover {
      box-shadow: 0 6px 10px 4px #e2e7e7;
    }
  }
}

.goods-wrap {
  background-color: #fff;
  padding: 30px 0;
}
.goods-show-img img {
  width: 90%;
  margin: 0 auto;
}
.goods-show-price {
  margin-top: 6px;
}
.goods-show-detail {
  font-size: 14px;
  margin: 6px 0px;
  @include lineClamp(2);
}

.goods-show-num {
  color: #999;
  font-size: 12px;
}
.goods-show-seller {
  font-size: 12px;
  color: #e4393c;
}
.goods-page {
  margin: 20px auto;
  display: flex;
  justify-content: center;
}
.bread-crumb {
  padding: 10px 0 0;
}
/* ---------------商品栏结束------------------- */
</style>
